// PDF.js
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
/**
 * 网页转pdf
 * @param {*} dom 指定区域
 * @param {*} name 文件名
 */
export const downloadPDF = (dom, name, a4width, a4height) => {
  return new Promise((resolve, reject) => {
    const domWidth = dom.offsetWidth
    const domHeight = dom.offsetHeight
    console.log(domWidth, domHeight)
    setTimeout(() => {
      const _downDOM = dom
      console.log('进来了么')
      // 导出之前先将滚动条置顶,不然会出现数据不全的现象
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(_downDOM, { // 两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
        scale: 4, // 按比例增加分辨率 (2=双倍).
        dpi: window.devicePixelRatio * 4 // 设备像素比
      }).then((canvas) => {
        const contentWidth = domWidth
        const contentHeight = domHeight
        console.log(contentWidth + '||' + contentHeight)
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / a4width) * a4height
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = a4width
        const imgHeight = (a4width / contentWidth) * contentHeight
        // const pageData = new Image()
        // 设置图片跨域访问
        // pageData.setAttribute('crossOrigin', 'Anonymous')
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const pdf = new JsPDF('', 'pt', 'a4')
        /*
          new JsPDF('', 'pt', 'a4') 三个参数：new JsPDF('参数1','参数2','参数3')
          · 参数1:'l'/'p'  l：横向 p：纵向
          · 参数2：测量单位("pt"，"mm", "cm", "m", "in" or "px") -- 建议用pt  1(pt) = 1/72(inch) 1(inch) = 2.54(cm)
          · 参数3：pdf的格式，默认'a4',
              ---- 这里有很多格式可选：
                  a0 - a10
                  b0 - b10
                  c0 - c10
                  dl
                  letter
                  government-letter
                  legal
                  junior-legal
                  ledger
                  tabloid
                  credit-card
              ---- 我们主要知道的为：a3 --> [841.896,1190.55],a4 --> [595.28,841.89],以及自定义格式
              ---- 自定义格式参数为：[pdfX, pdfY] --理解：pdfX:pdf的宽度 pdfY：pdf的高度
        */
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 1.25, 0, imgWidth, imgHeight)
          /*
            pdf.addImage(image, format, x, y, width, height, alias, compression, rotation)
            1、image：表示要插入的图片资源，可以是图片文件的路径或者base64编码字符串。
            2、format：表示要插入的图片格式，包括：‘JPEG’, ‘PNG’, ‘GIF’, ‘BMP’, ‘TIFF’, ‘RAW’, ‘JPEG2000’。
            注：正常pdf的a4纸距离四边 2.54cm(上下) 3.14cm(左右)
            3、x：图片在PDF中的x轴坐标，单位为pt（点）。 1(pt) = 1/72(inch) 1(inch) = 2.54(cm)
            4、y：图片在PDF中的y轴坐标，单位为pt（点）。
            5、width：图片在PDF中的宽度，单位为pt（点）。
            6、height：图片在PDF中的高度，单位为pt（点）。
            7、alias（可选）：指定图片资源的别名。
            8、compression（可选）：指定图片的压缩质量，取值为0-1之间的浮点数。
            9、rotation（可选）：指定图片的旋转角度，取值范围为0-360之间的整数。
          */
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 1.25, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= a4height // 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        // 这里返回文件 用来处理多个下载 打包zip
        resolve({ PDF: pdf, name: name })
        // 直接单个pdf可直接调用下面方法
        // pdf.save(name)
      })
    }, 10)
  })
}
